<template>
	<view class="shop-bar">
		<view class="left">
			<view class="phone align-center font-weight ">
				<text class="font-size14">总计：</text>
				<text class="color-red font-size14">¥ </text>
				<text class="color-red font-size22">{{totalPrice}}</text>
			</view>
			 
		</view>
		<view class="right-btn u-flex u-flex-center align-center">
			<view class="u-margin-right-40">
				<view class="u-flex" @tap="()=>showFeePopup= !showFeePopup">
					<text class="font-size14">明细</text>
					<view>
						<u-icon name="arrow-up"></u-icon>
					</view>
				</view>
				<popupSlot v-model:showDetails="showFeePopup" title="费用明细">
					<template #default>
						<view class="u-flex u-flex-between align-center">
							<view class="">
								<text>商品总价</text>
							</view>
							<view class="">								
								<text class="font-weight">¥ {{ee.shopCart.buy_num * ee.shopCart.price}}</text>
							</view>
						</view>
						<view class="u-flex u-flex-between align-center u-margin-top-40 font-size14">
							<view class="color-gray">
								<text>{{ticket.title}}</text>
							</view>
							<view class="color-gray">								
								<text>¥ {{ee.shopCart.price}} × {{ee.shopCart.buy_num}}</text>
							</view>
						</view>
						<view v-if="ticket.discount>0" class="u-flex u-flex-between align-center  u-margin-top-40 font-size14">
							<view class="">
								<text>优惠</text>
							</view>
							<view class="">								
								<text class="font-weight">- ¥{{ticket.discount}}</text>
							</view>
						</view>
						<view class="line-border u-margin-top-40 u-margin-bottom-40"></view>
						<view class="u-flex u-flex-between align-center">
							<view class="">
								<text> 在线支付 </text>
							</view>
							<view class="">								
								<text class="color-red font-weight">¥ {{totalPrice}} </text>
							</view>
						</view>
						
					</template>					
				</popupSlot>
			</view>
			
			<view class="order-btn" @tap="onClickBuyBtn" 
			:style="{backgroundColor:ee.bgColor.weight}">
				<text class="font-size15">立即支付</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onActivated,
		watchEffect,
		watch,
		provide,
		nextTick,
		computed
	} from 'vue';
	
	import popupSlot from './popup-slot.vue';
	
	const showFeePopup = ref(false);
	
	const props =  defineProps({
		totalPrice: {
			type: [String,Number],
			default: 0
		},
		ticket :{
			type: Object, 
			default:{}
		}
	})
	
	const emits = defineEmits(['clickBuyBtn']);
	
	function onClickBuyBtn(e){
		emits('clickBuyBtn', e)
	}
</script>

<style lang="scss" scoped>
	.shop-bar{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding:10px;
		// border-top: $u-border-color 1px solid;
	    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
		 
		
		& .left{
			display: flex;		 
			text-align: center;
		}
		 
		.order-btn{
			color: #ffffff;
			padding:10px;
			text-align: center;
			font-weight: bold;
			border-radius: 30px;			
			min-width: 90px;
		}
	}
</style>